<template>
	<view>
		<view v-show="ifshow" @tap="ableClose" @touchmove.stop.prevent class="popup-layer"></view>
		<view class="popup-content" @tap.stop="stopEvent" :style="_location">
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch } from 'vue';
const props = defineProps({
	showPop: {
		type: Boolean,
		default: false
	},
	direction: {
		type: String,
		default: 'top' // 方向  top，bottom，left，right
	},
	autoClose: {
		type: Boolean,
		default: true
	}
});

let ifshow = ref(false); // 是否展示,
let translateValue = 0;

//#ifdef H5
translateValue = -150; // 位移距离
//#endif
//#ifndef H5
translateValue = -100; // 位移距离
//#endif
let timer = null;
let iftoggle = false;

const _translate = computed(() => {
	const transformObj = {
		top: `transform:translateY(${-translateValue}%)`,
		bottom: `transform:translateY(${translateValue}%)`,
		left: `transform:translateX(${-translateValue}%)`,
		right: `transform:translateX(${translateValue}%)`
	};
	return transformObj[props.direction];
});

const _location = computed(() => {
	let positionValue = {};
	//#ifndef H5
	positionValue = {
		top: 'bottom:0px;width:100%;',
		bottom: 'top:0px;width:100%;',
		left: 'right:0px;height:100%;',
		right: 'left:0px;height:100%;'
	};
	//#endif
	//#ifdef H5
	positionValue = {
		top: 'bottom:50px;width:100%;',
		bottom: 'top:0px;width:100%;',
		left: 'right:0px;height:100%;',
		right: 'left:0px;height:100%;'
	};
	//#endif
	return positionValue[props.direction] + _translate;
});

onMounted(() => {
	if (props.showPop) {
		show();
	}
});

watch(
	() => props.showPop,
	(value) => {
		if (value) {
			show();
		} else {
			close();
		}
	}
);

function stopMove(event) {
	console.log(11);
	console.log(event);
	return;
}
function show() {
	ifshow.value = true;
	console.log(ifshow.value);
	let _open = setTimeout(() => {
		translateValue = 0;
		_open = null;
	}, 100);
	let _toggle = setTimeout(() => {
		iftoggle = true;
		_toggle = null;
	}, 300);
}

const emits = defineEmits(['closeCallBack', 'change']);
function close() {
	if (timer !== null || !iftoggle) {
		return;
	}
	translateValue = -100;
	//#ifdef H5
	translateValue = -150;
	//#endif
	timer = setTimeout(() => {
		ifshow.value = false;
		timer = null;
		iftoggle = false;

		emits('change', false);
		emits('closeCallBack', null);
	}, 300);
}
function ableClose() {
	if (props.autoClose) {
		close();
	}
}
function stopEvent(event) {}
function doSome() {
	console.log(111222111111111);
}
</script>

<style lang="scss">
.popup-layer {
	position: fixed;
	z-index: 2;
	background: rgba(0, 0, 0, 0.3);
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	overflow: hidden;
}

.popup-content {
	position: fixed;
	z-index: 9991;
	background: #ffffff;
	transition: all 0.3s ease;
	overflow: hidden;
	box-sizing: border-box;
	// border:1px solid red;
}
</style>
